<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style:none;
                text-decoration: none;
            }
            .header{
                height: 497px;
                background: url('images/bg.jpg') repeat-x;
            }
            .banner{
                height: 426px;
            }
            .con{
                width: 968px;
                height: 377px;
                margin:47px auto 31px;
            }
            .footer{
                height: 50px;
                width: 968px;
                margin:0px auto;
                border-top: 1px solid black;
            }
            .nav{
                width: 958px;
                height:74px ;
                margin:0px auto
            }
            .nav img{
                height: 44px;
                width: 129px;
                margin: 14px 0px 14px;
                float: left;
            }
            .nav li{
                float: right;
                margin: 30px 10px;
                color: white;
                font-size: 14px;
            }
            .nav a{
                color: white;
            }
            .wrap{
                width: 958px;
                height:426px ;
                margin:0px auto
            }
            .wrap .left{
                float: left;
            }
            .wrap .right{
                float: right;;
            }
            .left h4{
                font-size: 26px;
                margin-top: 45px;
            }
            .left .list li{
                font-size: 14px;
                margin-top: 15px;
            }
            .banner img{
                margin-top: 21px;
            }
            .banner li{
                margin-top: 15px;
            }
            .banner li a{
                color: green;
            }
            .con .left p{
                font-size: 14px;
                margin: 5px 0px;
                color: grey;
            }
            .con .left a{
                color: green;
            }
            .con .right{
                float: right;
            }
            .con .right p{
                margin-top: 5px;
                color: grey;
                font-size: 12px;
            }
            .con .right a{
                font-size: 14px; color: green;
            }
            .footer a{
                color: grey;
                font-size: 12px;
            }
            .footer p{
                color: grey;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="nav">
                <h1>
                    <a href="">
                        <img src="images/log.png" alt="">
                    </a>
                </h1>
                <ul>
                    <li>
                        <a href="">微信网页版</a>
                    </li>
                    <li>
                        <a href="">表情开放平台</a>
                    </li>
                    <li>
                        <a href="">企业微信</a>
                    </li>
                    <li>
                        <a href="">微信广告</a>
                    </li>
                    <li>
                        <a href="">微信支付</a>
                    </li>
                    <li>
                        <a href="">开放平台</a>
                    </li>
                    <li>
                        <a href="">公众平台</a>
                    </li>
                    <li>
                        <a href="">帮助与反馈</a>
                    </li>
                    <li>
                        <a href="">首页</a>
                    </li>
                </ul>
            </div>
            <div class="banner">
                <div class="wrap">
                    <div class="left">
                        <h4>微信，是一个生活方式</h4>
                        <ul class="list">
                            <li>超过十亿人使用的手机应用</li>
                            <li>支持发送语音短信、视频、图片和文字</li>
                            <li>可以群聊，仅耗少量流量，适合大部分智能手机</li>
                        </ul>
                        <img src="images/down.png" alt="">
                        <ul class="cc">
                            <li>
                                <a href="">
                                    忘记了微信帐号或密码?
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    自助解除登录或功能限制
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    冻结或解冻微信帐号
                                </a>
                            </li>
                        </ul>
                    </div>
                    <img src="images/com.png" alt="" class="right">
                </div>
            </div>
        </div>
        <div class="con">
            <div class="right">
                <ul>
                    <li>
                        <h5>最新消息</h5>
                        <p><a href="">微信 8.0.2 for Android 正式版发布(New)</a>  03-25</p>
                        <p><a href="">微信 3.2.1 for Windows 正式版发布 (New)</a>  03-22</p>
                        <p><a href="">微信 8.0.2 for iOS 正式版发布(New)</a>  02-02</p>
                        <p><a href="">微信 2.6.1 for Mac 正式版发布 (New))</a>  01-20</p>
                        <p><a href="">关于部分 iOS 9 用户无法更新微信(New)</a>  02-11</p>
                        <p><a href="">微信网页版 2.1 版本发布</a>  01-17</p>
                        <p><a href="">微信表情开放平台上线</a>  07-29</p>
                        <p><a href="">官方辟谣公众号开通</a>  10-28</p>
                        <p><a href="">查看更多</a></p>
                    </li>
                </ul>
            </div>
            <div class="left">
                <img src="images/list.png" alt="">
                <ul>
                    <li style="float: left;margin-right: 65px">
                        <h5>微信网页版</h5>
                        <p>扫一扫二维码</p>
                        <p>就能在浏览器上使用微信</p>
                        <a href="">了解更多</a>
                    </li>
                </ul>
                <ul>
                    <li style="float: left;margin-right: 90px">
                        <h5>微信 Mac 版</h5>
                        <p>极致简洁，迅捷沟通</p>
                        <a href="">了解更多</a>
                    </li>
                </ul>
                <ul>
                    <li style="float: left;">
                        <h5>微信 Windows 版</h5>
                        <p>让沟通更方便</p>
                        <a href="">了解更多</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <a style="float: right;margin-top: 3px;" href="">
                简体中文 | 繁体中文 | English
            </a>
            <a href="">
                关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引
            </a>
            <p>© 1998 - 2021 Tencent Inc. All Rights Reserved</p>
        </div>
    </body>
 </html>